<template>
  <div class="goods">
    <div class="box">
      <div class="add">
        <el-input
          placeholder="请输入查询id"
          show-word-limit
          style="width: 240px"
          size="large"
          v-model="seekValue"
        >
          <template #append>
            <el-button :icon="Search" @click="seek" />
          </template>
        </el-input>
        <el-button type="primary" size="large" @click="add">添加分类</el-button>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="550"
          :border="parentBorder"
          :preserve-expanded-content="preserveExpanded"
        >
          <el-table-column prop="cat_id" label="" type="expand">
            <template #default="props">
              <el-table
                :data="props.row.children"
                style="width: 100%"
                :border="childBorder"
                :preserve-expanded-content="preserveExpanded"
              >
                <el-table-column prop="cat_id" label="" type="expand" width="100">
                  <template #default="props">
                    <el-table
                      :data="props.row.children"
                      style="width: 100%"
                      :border="childBorder"
                      :preserve-expanded-content="true"
                    >
                      <el-table-column width="150"></el-table-column>
                      <el-table-column prop="cat_id" label="id"></el-table-column>
                      <el-table-column
                        prop="cat_name"
                        label="商品三级类目"
                        width="360"
                      ></el-table-column>
                      <el-table-column prop="" label="商品价格(元)"></el-table-column>
                      <el-table-column prop="" label="商品数量"></el-table-column>
                      <el-table-column prop="address" label="创建时间" />
                      <el-table-column prop="address" label="操作" />
                    </el-table>
                  </template>
                </el-table-column>
                <el-table-column prop="cat_id" label="id"></el-table-column>
                <el-table-column prop="cat_name" label="商品二级类目" width="400"></el-table-column>
                <el-table-column prop="" label="商品价格(元)"></el-table-column>
                <el-table-column prop="" label="商品数量"></el-table-column>
                <el-table-column prop="address" label="创建时间" />
                <el-table-column prop="address" label="操作" />
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="cat_id" label="id" width="50"></el-table-column>
          <el-table-column prop="cat_name" label="商品类目" width="300" />
          <el-table-column prop="" label="商品价格(元)" />
          <el-table-column prop="" label="商品重量" />
          <el-table-column prop="" label="商品数量" />
          <el-table-column prop="address" label="创建时间" />
          <el-table-column prop="address" label="操作">
            <template #default="scope">
              <div class="line">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getCommodityTable } from '@/api/commodityTable'
import { Search } from '@element-plus/icons-vue'
import { useCounterStoreB } from '@/stores/temporary'
interface tableData {
  cat_id?: number
  data: {
    data: { cat_id: number }
  }
}

const storeB = useCounterStoreB()
const tableData = ref()
const parentBorder = ref(false)
const childBorder = ref(false)
const preserveExpanded = ref(false)
const state = ref(storeB.addState)
const seekValue = ref()

const table = async () => {
  try {
    const res = (await getCommodityTable()) as tableData
    tableData.value = res.data.data
  } catch {
    console.log('请求失败')
  }
}
const add = () => {
  state.value = !state.value
  storeB.stateFun(state.value)
  storeB.titleStateFun('添加分类')
}
interface tableData {
  cat_id?: number
  cat_name?: string
  children?: tableData[]
}
const seek = () => {
  tableData.value = tableData.value.filter(
    (item: tableData) => item.cat_id === Number(seekValue.value),
  )
}
const handleEdit = async (row: tableData) => {
  if (row.cat_id && row.cat_name) {
    storeB.cat_idFun(row.cat_id)
    storeB.cat_nameFun(row.cat_name)
  }
  sta('编辑分类')
}
const handleDelete = (row: tableData) => {
  sta('删除分类')
  if (row.cat_id) {
    storeB.cat_idFun(row.cat_id)
  }
}

const sta = (str: string) => {
  state.value = !state.value
  storeB.stateFun(state.value)
  storeB.titleStateFun(str)
}
onMounted(() => {
  table()
})
watch(
  () => storeB.addState,
  (newVal) => {
    state.value = newVal
  },
)
</script>

<style scoped lang="scss">
.box {
  .add {
    .el-input {
      margin-right: 20px;
    }
  }
  .line {
    display: flex;
    justify-content: center;
  }
}
</style>
